<template>
  <div class="table-column">
    <div class="table-column-component">
      <VanFormGenerator
        ref="formGenerator"
        :form-generator="fileds"
      />
    </div>
    <slot />
  </div>
</template>

<script>

export default {
  name: 'TableColumn',

  provide() {
    return {
      $$table: this
    };
  },

  props: {
    columns: { // 列
      type: Array,
      default: () => []
    }
  },

  computed: {
    fileds() {
      return { name: this.label, generator: this.columns };
    },

    formGenerator() {
      return this.$refs.formGenerator;
    }
  },

  methods: {
    // elements
    getElements() {
      const { getElements } = this.$refs.formGenerator;
      this.$nextTick(() => {
        console.log(getElements(), this.$refs.formGenerator, 'tableColumnv', 'tableColumnv1');
      });
      return getElements();
    }
  }
};
</script>

<style lang="scss" scoped>
.table-column {
  &-component {
    margin-bottom: $margin-xs;
  }
}
</style>
